<template>
<div class="main">
  <!-- 头部导航栏 -->
  <head-component :noBack="false"  title="我的团队"  :rightClick="rightClick" rightWords="推荐"/>

  <!-- 资产-->
  <div class="top">
    <div class="t col_ff">
      <img :src="userInfo.m_avatar?userInfo.m_avatar : userImg" alt="">
      <p class="f34">{{userInfo.m_name}}</p>
      <span class='f24'>{{userInfo.m_phone}}</span>
    </div>
    <ul>
      <li class="col_ff">
        <p class="f42">{{teamNum}}</p>
        <span class="f28">团队人数</span>
      </li>
      <li class="col_ff">
        <p class="f42">{{userInfo.m_money1}}</p>
        <span class="f28">团队奖收益</span>
      </li>
    </ul>
  </div>

  <!--  明细-->
  <div class="mxCon">
    <div class="tit"><p class="f36 col_33">成员</p></div>
    <div class="con">
      <!-- 列表 -->
      <div class="list" v-for="(item,i) in teamList" :key="i">
        <img :src="item.m_avatar?item.m_avatar : userImg" alt="">
        <div>
          <p class="f34 col_33">{{item.m_name}}</p>
          <span class='f24 col_99'>{{item.m_phone}}</span>
        </div>
      </div>
      <!-- 如果内容列表为空 -->
      <div class="null_list" v-if="teamList == ''">
        <img class="null_img" src="@/common/icon/nothing.png" alt="">
        <div class="null_title">暂无数据</div>
      </div>
    </div>
  </div>

</div>
</template>

<script>
import headComponent from '@/components/layout/head'
import userImg from '@/common/icon/user.png'
export default {
    name: "team.vue",
    data() {
      return {
        userImg:userImg,
        userInfo:{},
        teamList:[],
        teamNum:0,
      }
    },
  created(){
    var $this = this;
    $this.getCon();
  },
  methods: {
    getCon(){
      var $this = this;
      var t = this.$toast.loading({message:'正在加载数据',mask:true, duration:9999})
      var data = {u_id: localStorage.getItem('uid'),token:localStorage.getItem('token')};
      $this.$axios.post('index.php?m=user&c=team',data)
        .then((res) => {
          t.clear();
          if(res.data.code == 1){
            $this.userInfo = res.data.user;
            $this.teamList = res.data.t_user;
            $this.teamNum = res.data.tui;
          }else{
            $this.$toast({
              message: '请先登录',
              duration: 800,
              onClose:()=>{
                $this.$router.push('/login');
              }
            })

          }
        })
    },
      rightClick(){
        let isVip = localStorage.getItem('isVip');
        if(isVip == 0){
          this.$toast({
            message: '请先开通会员',
            duration: 800,
            onClose:()=>{
              this.$router.push('/vip');
            }
          });
        } else {
          this.$router.push('/share')
        }
      }
  },
  components: {
    headComponent,
  },
}
</script>

<style scoped lang="less">
  .layout-head{border-bottom: 0.02rem solid #f5f5f5;}
  .layout-head .header_flex .header-right .header_right_word{color: #666!important;font-size: 0.426rem!important;}
  .top{width: 92%;margin: 1.733rem auto 0;height: 5.6rem;text-align: center;background: url("~@/common/icon/bg2.png") no-repeat;
    background-size: 100% 100%;overflow: hidden;
    .t{margin-top: 0.6rem;
      img{width: 1.3rem;height: 1.3rem;margin-bottom: 0.13rem;border-radius: 100%;}
      span{display: block;opacity: 0.5;margin-top: 0.13rem;}
    }
    ul{width: 100%;overflow: hidden;margin-top: 0.6rem;
      li{
        float: left;
        width: 50%;
        span{
          display: block;opacity: 0.5;margin-top: 0.12rem;
        }
      }
    }
  }
  .mxCon {
    width: 100%;
    margin-top: 0.8rem;
    margin-bottom: 1.5rem;
    .tit {
      width: 92%;
      overflow: hidden;
      margin: 0 auto;
      line-height: 0.48rem;
      border-bottom: 0.02rem solid #f5f5f5;
      padding-bottom: 0.5333rem;
      p {
        float: left;
        padding-left: 0.266rem;
        border-left: 0.133rem solid #409aff;
        font-weight: 600;
      }
      span {
        float: right;
      }
    }
    .con{
      width: 92%;
      margin: 0 auto;
      .list{
        width: 100%;
        overflow: hidden;
        padding: 0.666rem 0;
        border-bottom:0.02rem solid #f5f5f5 ;
        img{float: left;width: 1.3rem;height: 1.3rem;border-radius: 100%;}
        div{
          float: left;
          margin-left: 0.366rem;
          margin-top: 0.14rem;
          span{display: block;margin-top: 0.1333rem;}
        }
      }
      .null_list{ margin-top: 1.5rem; }
    }
  }
</style>
